<template>
  <div class="login_page">
    <div class="login_header">
      <div class="container">
        <div class="h_login">
          <a href="/#/index">
            <div class="log">
              <img src="../../public/imgs/login-logo.png" alt="" />
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="login_main">
      <div class="container">
        <div class="login_form">
          <div class="login_top">
            <div class="login_zh">账号登陆</div>
            <div class="login_sm">扫码登陆</div>
          </div>
          <div class="mian">
            <div class="login_input">
              <el-input placeholder="邮箱" v-model="username"></el-input>
              <div @keyup.enter="login">
                <el-input
                  placeholder="密码"
                  type="password"
                  v-model="password"
                ></el-input>
              </div>
            </div>
            <div class="login_button">
              <el-button @click="login">登陆</el-button>
            </div>
            <div class="tips">
              <div class="sms"><a href="/#/register">手机短信登录/注册</a></div>
              <div class="reg">
                <a href="/#/register">立即注册</a><span>|</span
                ><a href="javascript:;">忘记密码？</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="login-footer">
      <div class="footer_link">
        <a target="_blank" href="http://www.lusji.xyz">悦动听</a>
        <span>|</span>
        <a target="_blank" href="http://lusj.lusji.xyz">个人博客</a>
        <span>|</span>
        <a target="_blank" href="http://lu.lusji.xyz">全栈高仿美团网</a>
        <span>|</span>
        <a target="_blank" href="http://lj.lusji.xyz">欢乐购</a>
        <span>|</span>
        <a target="_blank" href="http://test.lusji.xyz">电商系统</a>
      </div>
      <div data-v-6bb7f4f0="" class="copyright">
        Copyright ©2020
        <span data-v-6bb7f4f0="" class="domain">卢升捷</span> All Rights
        Reserved.
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'login',
  data () {
    return {
      username: '',
      password: '',
      userId: ''
    }
  },
  methods: {
    ...mapActions(['setUserName', 'setCartCount']),
    login () {
      const { username, password } = this
      if (!username || !password) {
        return this.$msg.error('请完善表单！')
      }
      this.$axios
        .post('/user/login', {
          username,
          password
        })
        .then(res => {
          this.$msg.success(res.msg)
          // 把用户id存储到cookie中
          this.$cookies.set('userId', res.data.id, '1d')
          this.$cookies.set('username', res.data.username, '1d')
          // 设置vuex
          this.setUserName(res.data.username)
          this.getCartCount()
          setTimeout(() => {
            this.$router.push('/')
          }, 500)
        })
    },
    getCartCount () {
      this.$axios.get('/carts/products/sum').then(res => {
        this.setCartCount(res.data)
        this.$cookies.set('cartCount', res.data)
      })
    }
  }
}
</script>

<style lang="scss">
@import './../assets/scss/base.scss';
@import './../assets/scss/mixin.scss';
@import './../assets/scss/config.scss';
@import './../assets/scss/login.scss';
</style>
